---
import { Heading, Link } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'

/**
 * CallToAction Component
 *
 * @description A prominent call-to-action section with a title and link
 */
interface Props {
  /**
   * The title text to display
   * @default "Get this theme on GitHub"
   */
  title?: string
  /**
   * The URL the button should link to
   * @default "https://github.com/incluud/accessible-astro-starter"
   */
  link?: string
  /**
   * The text to display on the button
   * @default "Get Started"
   */
  linkText?: string
}

const {
  title = 'Get this theme on GitHub',
  link = 'https://github.com/incluud/accessible-astro-starter',
  linkText = 'Use this theme',
} = Astro.props
---

<div class="container">
  <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl px-12 py-20 md:px-24">
    <Heading level="h2" class="text-center text-3xl md:text-6xl">{title}</Heading>
    <Link href={link} isButton size="lg" animateOnHover animationType="nudge">
      {linkText}
      <Icon aria-hidden="true" name="lucide:rocket" size="1.5rem" />
    </Link>
  </div>
</div>

<style lang="scss">
  @use '../assets/scss/base/mixins' as *;

  .call-to-action {
    position: relative;
    background-image: linear-gradient(
      315deg,
      light-dark(var(--color-primary-100), var(--color-secondary-100)) 25%,
      light-dark(var(--color-secondary-100), var(--color-primary-200))
    );
    color: var(--color-neutral-900);
  }
</style>
